/* 仿W3Cschool，详细请进入网址 www.w3cschool.com 
1.熟悉css常用属性，掌握本例子所有css属性
2.打造哔哩哔哩官网布局界面，背景色布局
3.利用bootsrap开发一个官方，仿造一个
*/



/* 鼠标在a上面时标记 */
a:hover { 
    color: red; 
}
/* 容器 */
.index-container { 
    width: 1140px;   /* 宽度 */
    margin: 0 auto;  /* 四值上 右 下 左 三值上 左右 下 两值 上下 左右 
                       auto居中 外边距上下为0，左右等宽 即居中 对块级元素有效 */
    /* background-color: darkred;  */
}
/* @media min-width 定义设备页面最大可见区域宽度 */
@media (min-width: 1300px) {
    .index-container { 
        width: 1240px; 
    }
}
#header { 
    height: 80px; /* 高度 */
    background-color: red;/* 背景颜色 */
}
#header .h-logo { 
    width: 220px; 
    height: 50px; 
    background-color:brown;
    margin-top: 15px; /* 上边距 */
}
#header .h-logo .www-logo { 
    display: block; /* 定义元素生成框的类型 none不显示 block块级元素 inline行内元素 */
    width: 214px; 
    height: 100%; 
    margin: 0 auto; 
}

#header .h-search {
    box-sizing: content-box; /* 盒模型  conrent-box 宽度为width+padding+border
    border-box 宽度为盒子给定的宽高，加padding border 则减去padding和border的宽高 
    box-model 盒子模型 margin border padding content*/
    height: 40px;
    margin-left: 220px;/* 左边距 */
    margin-right: 242px;/* 右边距 */
    padding-top: 20px;/* 填充或内边距 padding不允许出现负值 */
    background-color: darkcyan; /* 背景颜色 */
}
#header .h-search .search-box {
    width: 460px;
    height: 100%;
    margin: 0 auto;
    border: 2px solid #fe6a00; /* 边界填充颜色 */
    border-radius: 2px;/* 圆角边框 */
}
#header .h-search .search-box .input{
    width: 396px;
    height: 100%;
    padding: 0 14px;
    font-size: 14px;/* 字体大小 */
    border: none;/* 没有边界 */
}
#header .h-search .search-box .submit { 
    width: 60px; 
    height: 100%; 
    background-color: #fe6a00; 
    border: none; 
    cursor: pointer; /* 鼠标指针放在元素显示的光标形状 
    auto 默认   crosshair 十字线    pointer 一只手
    e-resize 矩形框可被向右移动 ....
    wait 程序正忙，一只表   help  问号 
    */
}
#header .h-search .search-box .submit .i-icon { 
    height: 18px;
    width: 18px;
    content: url('../images/help.png');/* 
    attr 生成标签属性  url 生成外部资源，图片、音频、视频等
    string 生成字符转 */
    margin: 0 auto;
    /* background-color: brown; */
}

@media (min-width: 1300px) {
    #header .h-search .search-box { 
        width: 520px; 
    }
    #header .h-search .search-box .input { 
        width: 456px; 
    }
}

.h-right {
    margin-top: 22px;
    /* font-family: Georgia, 'Times New Roman', Times, serif; */ /* 字体 */
    font-size: 14px;
    line-height: 36px;/* 行高  inherit从父元素继承行高属性 */
    background-color: cadetblue;
}
.h-right .link { 
    padding: 0 8px; 
}

.h-right .mobile {
    position: relative; /* 定位 absolute生成绝对定位元素,  
    relative生成相对定位元素，   
    fixed生成固定定位元素，相对浏览器定位   
    static默认值，没有定位   inherit继承父级元素*/
    margin-right: 24px;
    background-color: chartreuse;
}
.h-right .mobile .link { 
    display: block; /* 规定元素生成框类型 块级元素 行内元素 行内块元素*/
}
.h-right .mobile .i-icon { 
    margin-right: 3px;
    height: 10px;
    width: 10px;
    content: url('../images/help.png');  
    /* background-color: crimson; */
}
#nav { 
    height: 52px; 
    margin-top: 10px;
    background-color: aqua; 
}
#nav .nav-menu { 
    padding-left: 220px; 
}
#nav .nav-menu-item { 
    position: relative; 
    float: left;  /* 浮动，绝对定位忽略浮动 左浮动 右浮动 inherit继承父级元素float属性
    浮动会让元素脱离文档流 
    clear 清除浮动 */
    padding: 0 24px; 
    font-size: 16px; 
    line-height: 52px;
    background-color: red; 
}
#main { 
    height: 272px;
}
#main .index-container { 
    position: relative; 
    height: 100%;
    background-color: chocolate; 
}

.sider-nav { 
    position: absolute; /* 个人认为父级元素为relative，子级元素为absolute，利用复制移动 */
    top: -52px; 
    left: 0; 
    width: 220px;
    /* background-color: aquamarine;  */
}
.sider-nav-title { 
    height: 52px;
    font-size: 16px;  
    padding-left: 18px; 
    line-height: 52px; 
    font-weight: normal; /*字体宽度  */
    color: #fff;
    background-color: #fe6a00; 
    border-radius: 4px 4px 0 0; 
}
.sider-nav-title .i-icon { 
    vertical-align: middle;/* 垂直居中 */
    margin-right: 10px;
    content: url('../images/help.png'); 
    height: 22px;
    width: 22px;     /*图片大小22px */
    /* background-color: aqua;  */
}

.sider-nav-catalog { 
    position: relative; 
    height: 317px; 
    background-color:rgb(184, 128, 128);
    border-width: 0 0 1px 1px;  /* 边界填充 */
    border-style:solid; /* 边框样式 dotted点状 solid实线 double双线 dashed虚线 
    groove3D凹槽边框 ridge3D垄状边框 inset 3D outset 3D 取决边界颜色 inherit 一般都是继承父级元素属性*/
    border-color: rgb(0, 0, 0); 
}

.sider-nav-catalog .catalog-item { 
    height: 14.28571429%; /* 平分 */
}

/* 选择sider-nav-catalog选择器下的catalog-item与catalog-item之间
   div + p 选择所有紧接着<div>元素之后<p>的元素
*/
.sider-nav-catalog .catalog-item + .catalog-item { 
    border-top: 1px solid blue; 
}

.sider-nav-catalog .catalog-item:hover .title { 
    color: #fe6a00; 
    background-color: #f5f5f5; 
}
.sider-nav-catalog .catalog-item:hover .title .i-icon { 
    
    color: red;    /* color: #fe6a00;  */
}
.sider-nav-catalog .catalog-item .title { 
    position: relative; 
    display: block; 
    height: 100%;
    padding-left: 18px; 
    font-size: 15px;
}
.sider-nav-catalog .catalog-item .title::before { 
    content: ""; 
    display: inline-block; 
    height: 100%;
    /* background-color: blue; */
    vertical-align: middle;   
}
.sider-nav-catalog .catalog-item .title span { 
    display: inline-block; 
    vertical-align: middle; 
}
.sider-nav-catalog .catalog-item .title .i-icon { 
    position: absolute; 
    top: 50%; 
    right: 15px; 
    margin-top: -11px;
    /* background-color: cornflowerblue;  */
    font-size: 15px; 
    color: #aaa; 
    line-height: inherit; 
}

.sider-nav-catalog .catalog-item .children { 
    display: none;/* 隐藏内容 */
    position: absolute; 
    top: 0; 
    left: 100%; 
    z-index: 10; 
    width: 920px; 
    min-height: 317px; 
    line-height: 1.5; 
    background-color: #fff; 
    border: 1px solid blue; 
    box-shadow: 0 0 4px 0 rgba(102, 102, 102, .25); 
}
.sider-nav-catalog .catalog-item:hover .children { 
    display: block; 
}
.sider-nav-catalog .catalog-item .children-list { 
    padding: 0 18px; 
    /* background-color: burlywood; */
}

.sider-nav-catalog .catalog-item .children-list-head { 
    padding: 15px 0 12px; 
}
.sider-nav-catalog .catalog-item .children-list-head-title { 
    font-size: 15px; 
    font-weight: 600; /* 字体宽度 */
}
.sider-nav-catalog .catalog-item .children-list-head-more { 
    line-height: 22px; 
    color: #fe6a00; 
    /* background-color: cadetblue; */
}
.sider-nav-catalog .catalog-item .children-list + .children-list .children-list-title { 
    border-top: 2px solid #eb0b0b; 
}
.sider-nav-catalog .catalog-item .children-list-content { 
    /* margin-right: -33px; */
    background-color: aquamarine; 
}

.sider-nav-catalog .children .course { 
    float: left; 
    margin-right: 33px; 
    margin-bottom: 18px;
    background-color: rgb(156, 45, 45); 
    font-size: 0; 
    -webkit-transition: all 0.24s ease-in; 
    /* 前缀 
    -ms- IE -mos-火狐 -webkit-谷歌 -o- -xv- Opera浏览器
    */
    transition: all 0.24s ease-in; 
}
.sider-nav-catalog .children .course:hover { 
    -webkit-transform: translateY(-6px); /* 跳动 */
    transform: translateY(-6px); 
    /* transform 元素的2D或3D转换
       transform(x,y)2D转换 transform(x,y,a)3D转换 transformX(x) transformY() transformZ()
    */
}
.sider-nav-catalog .children .course > a { 
    display: block;
    background-color: bisque; 
    width: 150px; 
}
.sider-nav-catalog .children .course-cover { 
    display: block; 
    border-radius: 4px; 
}
.sider-nav-catalog .children .course-title { 
    width: 100%; 
    padding-top: 6px; 
    font-size: 13px; 
    color: #333; 
}
@media (min-width: 1300px) {
    #main { height: 312px; 
    }
    .sider-nav-catalog { 
        height: 364px; 
    }
    .sider-nav-catalog .catalog-item .title .i-icon { 
        line-height: inherit; 
    }
    .sider-nav-catalog .catalog-item .children { 
        width: 1020px; 
        min-height: 364px; 
    }
    .sider-nav-catalog .catalog-item .children-list { 
        padding: 0 30px; 
    }
    .sider-nav-catalog .catalog-item .children-list-content { 
        margin-right: -52px; 
    }

    .sider-nav-catalog .children .course { 
        margin-right: 52px; 
    }
}

.banner { 
    width: 680px; 
    height: 100%; 
    margin-left: 220px; 
    background-color: rgb(139, 50, 50); 
}
@media (min-width: 1300px) {
    .banner { width: 780px; }
}

.carousel { 
    position: relative; 
}
.carousel-wrapper { 
    height: 100%; 
}
.carousel-slide { 
    position: relative; 
    display: none; 
    height: 100%; 
}
.carousel-slide > a { 
    display: block; 
    height: 100%; 
}

.carousel-pagination { 
    z-index: 9; /* 元素堆叠顺序，数值越高越处于前面 */
    position: absolute; 
    left: 0; 
    bottom: 6%; 
    width: 100%; 
    height: 18px; 
    line-height: 18px; 
    text-align: center; 
}
.carousel-pagination-bullets { 
    display: inline-block; 
    padding: 0 12px; 
    background-color: rgba(0, 0, 0, 0.1); 
    border-radius: 9px; 
}
.carousel-pagination-bullet { 
    display: inline-block; 
    width: 8px; 
    height: 8px; 
    margin: 0 4px; 
    border: 1px solid #fff; 
    border-radius: 50%; 
    cursor: pointer; 
}
.carousel-pagination-bullet.cur { 
    background-color: #fff; 
}

.carousel-button-prev, .carousel-button-next { 
    position: absolute; 
    top: 50%; 
    z-index: 9; 
    width: 26px; 
    height: 50px; 
    margin-top: -25px; 
    cursor: pointer; /* 鼠标贯标样式 */
    filter: alpha(opacity=60); /* 可视化效果，模糊与饱和度
    opacity透明程度  */
    opacity: 0.6;
}
.carousel-button-prev:hover, .carousel-button-next:hover { 
    filter: alpha(opacity=90); 
    opacity: 0.9; 
}
.carousel-button-prev { 
    left: 10px; 
}
.carousel-button-next { 
    right: 10px; 
}

@media (min-width: 1300px) {
    .banner { width: 780px; }
}

.quick-login { 
    width: 240px;
    height: 100%; 
    padding: 10px 14px; 
    background-color: blueviolet; 
    border: 1px solid #eee; 
}
.quick-login-not .login-title { 
    font-size: 18px; 
    font-weight: normal; 
    text-align: center; 
    color: #333; 
}
.quick-login-not .login-title::before { 
    content: ""; 
    display: inline-block; 
    width: 7px; 
    height: 7px; 
    margin-right: 8px; 
    vertical-align: middle;
    background-color: #946645; 
}
.quick-login-not .login-form { 
    margin-top: 10px; 
}
.quick-login-not .login-form .form-item { 
    position: relative; 
}
.quick-login-not .login-form .form-item + .form-item { 
    margin-top: 8px; 
}
.quick-login-not .login-form .form-item .input-prefix { 
    position: absolute; 
    top: 7px; 
    left: 8px; 
}
.quick-login-not .login-form .form-item .input-prefix .i-icon { 
    height: 18px;
    width: 18px;
    content: url('../images/help.png');
    /* background-color: crimson; */
}
.quick-login-not .login-form .form-item .input { 
    width: 100%; 
    padding: 6px 8px 6px 40px; 
    border: 1px solid #ddd; 
    border-radius: 3px; 
}
.quick-login-not .login-form .form-item .input:hover { 
    border-color: #aaa; 
}
.quick-login-not .login-form .form-item .input:focus { 
    border-color: #aaa; 
}
#scode-form-item{
    display: none;
}
.scode-box{
    display: none;
    position: absolute; 
    top: 6px;
    right: 4px;
}
.scode-img{
    height: 18px;
    width: 68px;text-align: left;font-size: 12px;
    background-color: darkcyan;
}

.quick-login-not .login-form .form-item .form-button { 
    display: block; 
    width: 100%; 
    height: 32px; 
    font-size: 15px; 
    line-height: 32px; 
    text-align: center; color: #fff; 
    background-color: #fe6a00; 
    border: none; 
    border-radius: 3px; 
    cursor: pointer;
    -webkit-transition: opacity 0.24s;
            transition: opacity 0.24s;
}

.quick-login-not .login-form .form-item .form-button:hover { 
    background-color: #f13000;
}
/*
#scode-form-item { 
    display: none; 
}
#scode-form-item .input { 
    width: 78px; 
    padding: 6px 8px; 
}
#scode-img { 
    vertical-align: top; 
}*/
#check-form-item { 
    font-size: 13px; 
}
#check-form-item .checkbox { 
    margin-right: 2px; 
    vertical-align: middle; 
}
.quick-login-not .login-sns { 
    margin-top: 10px; 
}
.quick-login-not .login-sns-row { 
    line-height: 30px; 
}
.quick-login-not .login-sns-row + .login-sns-row { 
    margin-top: 4px; 
}
.quick-login-not .login-sns-row .i-icon { 
    margin-right: 4px;
    /* background-color: darkgoldenrod; */
    /* font-size: 30px;  */
    height: 14px;
    width: 14px;
    content: url('../images/help.png');
    color: #b5b9bd; 
    vertical-align: middle; 
    -webkit-transition: color .24s ease; 
    transition: color .24s ease; 
}
.quick-login-not .login-sns-row .sns-qq > span { 
    margin-right: 5px; 
}

/* .login-sns-row .sns-wechat:hover .i-icon { 
    color: #3bae56; 
}
.login-sns-row .sns-qq:hover .i-icon { 
    color: #56abe4; 
}
.login-sns-row .sns-github:hover .i-icon { 
    color: #24292e; 
}
.login-sns-row .sns-weibo:hover .i-icon { 
    color: #eb4738; 
}
.login-sns-row .regist:hover .i-icon { 
    color: #fe6a00; 
} */

@media (min-width: 1300px) {
    .quick-login { 
        padding-top: 12px; 
        padding-bottom: 12px; 
    }
    .quick-login-not .login-form { 
        margin-top: 16px; 
    }
    .quick-login-not .login-form .form-item + .form-item { 
        margin-top: 14px; 
    }
    .quick-login-not .login-sns { 
        margin-top: 16px; 
    }
    .quick-login-not .login-sns-row + .login-sns-row { 
        margin-top: 10px; 
    }
} 

.headlines { 
    height: 52px; 
    margin-left: 220px; 
    padding: 11px 12px 0; 
    border-width: 0 1px 1px; 
    border-style: solid; 
    border-color: rgb(204, 6, 6); 
    
}
.headlines .headlines-icon .i-icon { 
    height: 25px;
    width: 25px; 
    content: url('../images/help.png');
}
.headlines .headlines-more { 
    color: #999; 
}
.headlines .headlines-more:hover { 
    color: #fe6a00; 
}
.headlines .headlines-more .i-icon { 
    font-size: 20px;
    vertical-align: middle;
    content: "•••"; 
    line-height: 25px; 
}
.headlines .headlines-list { 
    margin: 0 36px; 
    font-size: 0; 
}
.headlines .headlines-list li { 
    display: inline-block; 
    width: 50%; 
    font-size: 14px; 
    line-height: 25px; 
}
.headlines .headlines-list li:nth-child(2n) { 
    padding-left: 16px; 
}
.headlines .headlines-list li:nth-child(2n+1) { 
    padding-right: 16px; 
}
.headlines .headlines-list .headlines-time { 
    font-size: 13px; 
    color:blue; 
}
.headlines .headlines-list .headlines-content { 
    margin-right: 45px; 
}
.headlines .headlines-list .headlines-content::before { 
    content: "•"; 
    margin-right: 4px; 
    color: #fe6a00;
}

@media (min-width: 1300px) {
    .headlines { 
        height: 51.84px; 
        padding: 14px 12px 0; 
    }
}
.layer { 
    margin: 35px 0;
    background-color: aqua; 
}
.spread-layer .layer-content { 
    margin-right: -24px; 
}
.spread-layer .layer-content img { 
    display: inline-block; 
    width: 267px; 
    height: 86px; 
    overflow: hidden; 
    border-radius: 4px; 
    margin-right: 20px;
}

@media (min-width: 1300px) {
    .spread-layer .layer-content img { 
        width: 292px; 
        height: 94px; 
    }
}
.layer-title { 
    position: relative; 
    font-size: 20px; 
    font-weight: 600; 
    line-height: 30px;
    background-color: #f13000; 
}
.layer-title::before { 
    content: ""; 
    display: inline-block; 
    margin-right: 12px; 
    border-width: 8px 0 8px 8px; 
    border-style: solid; 
    border-color: 
    transparent transparent transparent #fe6a00; 
 }
/* .layer-title .more { 
    position: absolute; 
    top: 8px; 
    right: 0; 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 1; 
    color: red; 
} 
.layer-title .more:hover { 
    color: #fe6a00; 
}*/
.layer-subtitle { 
    margin-left: 16px; 
    font-size: 14px; 
    font-weight: 400; 
    vertical-align: top; 
    color: #666; 
}
.layer-content {
     margin-top: 20px; 
 }  

.tutorial-tabs .tabs-nav-wrap { 
     background-color: rgb(184, 46, 46); 
}
.tutorial-tabs .tabs-tab { 
    padding: 4px 12px; 
    margin: 0 10px 14px 0; 
    font-size: 15px; 
    cursor: pointer;
    -webkit-transition: all 0.24s; 
    transition: all 0.24s; 
}
.tutorial-tabs .tabs-tab:hover { 
    color: #fe6a00; 
}
.tutorial-tabs .tabs-tab.on { 
    color: #fff; 
    background-color: #fe6a00; 
    border-radius: 4px;
}

.tutorial-tabs .tabs-tab.on:hover { 
    color: rgb(53, 32, 32); 
}
 

.tutorial-project { 
    background-color: chocolate;
    padding-top: 20px; 
    border-bottom: 2px solid black;  /* 1px */
}
.tutorial-project .project-name { 
    margin-bottom: 20px; 
    font-size: 16px; 
    font-weight: 600; 
}  
.tutorial-project .project-name:before { 
    content: ""; /* 伪类  文字左右 与content使用 */
    display: inline-block; 
    width: 7px; 
    height: 7px; 
    margin-right: 8px; 
    margin-bottom: 2px; 
    vertical-align: middle; 
    background-color: #fe6a00;
}
.tutorial-project .project-list { 
    margin: 0 -12px;
    background-color: blue;
}
.tutorial-project .project-list-item-wrap { 
    width: 291px; 
    padding: 0 12px; 
    background-color: cadetblue;
} 
.tutorial-project .project-list-item { 
    display: block; 
    height: 94px; 
    margin-bottom: 24px; 
    padding: 15px; 
    border-radius: 4px; 
    -webkit-transition: 
    box-shadow 0.24s; 
    transition: box-shadow 0.24s; 
}
.tutorial-project .project-list-item:hover { 
    box-shadow: 0 3px 5px rgba(180, 26, 160, 0.3); 
    overflow: auto;
}
.tutorial-project .project-list-item .cover { 
    overflow: hidden; 
    border-radius: 4px; 
}
.tutorial-project .project-list-item .info { 
    margin-left: 84px; 
    background-color: coral;
}
.tutorial-project .project-list-item .info-title { 
    font-size: 15px; 
}
.tutorial-project .project-list-item .info-des { 
    height: 3em; 
    margin-top: 6px;
    color: #666; 
}
@media (min-width: 1300px) {
    .tutorial-project .project-list-item-wrap { 
        width: 316px; 
    }
}

.update-layer { 
    padding-top: 18px; 
    background-color: cornflowerblue;
}
.update-layer .title, .friendly-layer .title { 
    font-size: 16px; 
    font-weight: 600; 
}
.update-layer .title::after, .friendly-layer .title::after { 
    content: ":"; 
    position: relative; 
    top: -0.5px; 
    background-color: cyan;
    margin: 0 8px 0 2px; 
}
.update-layer .link-wrap, .friendly-layer .link-wrap { 
    padding-top: 2px; 
    margin-left: 80px;
}
.update-layer .link, .friendly-layer .link { 
    display: inline-block; 
    margin: 0 20px 12px 0; 
    font-size: 14px; 
    background-color: crimson;
}
#footer_item {
    width: 100%;
    min-width: 1130px;
    background: #efefef;
    border-top: 1px solid #ccc;
    padding: 20px 0;
}
#footer {
    clear: both;
    position: relative;
    margin: 0 auto;
    width: 1130px;
    height: auto;
    background-color: darkmagenta;
    overflow: hidden;
}
 .footer-box {
    float: left;
    /*width: 19%;*/
    width: 15.5%;
    margin-left: 1%;
    text-align: left;
}
.footer-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    line-height: 30px;
}
.footer-items a,.footer-items p {
    line-height: 26px;
    font-size: 14px;
    color: #333;
}
.footer-items p {
    margin: 0;
}
.footer-box .tcode {
    width: 100px;
    height: 100px;;
    margin: 10px auto;
}
.footer-box .tcode-txt {
    font-size: 14px;
    color: #333;
    text-align: center;
    background-color: darkturquoise;
    margin: 0 10px;
}
.footer-bottom {
    margin: 0px auto;
    width: 1130px;
    padding: 10px 0 0;
    text-align: center;
    line-height: 30px;
    background-color: deeppink;
}
.footer-bottom p {
    font-size: 13px;
    color: #666;
    line-height: 30px;
}
.footer-bottom .beian {
    background: url(../images/help.png) no-repeat 0 0;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-size: cover;
    display: inline-block;
    margin-right: 4px;
    margin-top: -4px;
}
#footer a:hover {
    text-decoration: underline;
    color: #fe6a00;
} 

@media (min-width:1300px) {
    #footer,.footer-bottom {
        width: 1230px;
    }
}














